<script>
  import * as THREE from "three"
  import * as SC from "svelte-cubed"

  let width = 1
  let height = 1
  let depth = 1
  let spin = 0

  SC.onFrame(() => {
    spin += 0.01
  })
</script>

<SC.Canvas
  antialias
  background={new THREE.Color("rgba(243, 244, 246,1)")}
  shadows
  fog={new THREE.FogExp2("rgba(243, 244, 246,1)", 0.05)}
>
  <SC.Group position={[0, -height / 2, 0]}>
    <SC.Mesh
      geometry={new THREE.PlaneGeometry(25, 25)}
      material={new THREE.MeshStandardMaterial({
        map: new THREE.TextureLoader().load("../img/bird.jpg"),
      })}
      rotation={[-Math.PI / 2, 0, 1]}
      receiveShadow
    />
    <SC.Mesh
      geometry={new THREE.BoxGeometry()}
      material={new THREE.MeshStandardMaterial({
        color: "#e879f9",
        roughness: 0.5,
        metalness: 0.5,
        opacity: 0.5,
        transparent: true,
      })}
      position={[-1, 1.5, 1.5]}
      scale={[width * 0.5, height * 0.5, depth * 0.5]}
      rotation={[spin, 0, 0]}
      castShadow
    />
    <!-- <SC.Primitive
			object={new THREE.GridHelper(50, 50, 'papayawhip', 'papayawhip')}
			position={[0, 0.001, 0]}
		/> -->
  </SC.Group>

  <SC.Mesh
    geometry={new THREE.BoxGeometry()}
    material={new THREE.MeshStandardMaterial({
      // color: 0xff3e00,
      color: "#f40",
      roughness: 0.5,
      metalness: 0.5,
      // opacity: 0.5,
      // transparent: true
    })}
    scale={[width, height, depth]}
    rotation={[0, spin, 0]}
    castShadow
  />

  <SC.PerspectiveCamera position={[3, 2, 3]} />
  <SC.OrbitControls enableZoom={false} maxPolarAngle={Math.PI * 0.51} />
  <SC.AmbientLight intensity={0.6} />
  <SC.DirectionalLight
    intensity={0.6}
    position={[-3, 5, -5]}
    shadow={{ mapSize: [2048, 2048] }}
  />
</SC.Canvas>

<div z-30 right-2 bottom-4>
  <label
    ><input type="range" bind:value={width} min={0.1} max={3} step={0.1} /> width</label
  >
  <label
    ><input type="range" bind:value={height} min={0.1} max={3} step={0.1} /> height</label
  >
  <label
    ><input type="range" bind:value={depth} min={0.1} max={3} step={0.1} /> depth</label
  >
</div>
